<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title> 伪类选择器 </title>
	<link rel="stylesheet" type="text/css" href="selector.css">
</head>
<body>
	<!-- 最外边的红色边框是 body 元素的 -->
	<ul>
		<li>无序列表第一项</li>
		<li>无序列表第二项</li>
		<li>无序列表第三项</li>
		<li>无序列表第四项</li>
		<li>无序列表第五项</li>
	</ul>

	<ul>
		<li>无序列表只有一项/li>
	</ul>

	<div>
		<p>这是第一个 div 的第一个段落 </p>
		<span> 这是什么？ </span>
	</div>

	<div>
		<p>这是第二个 div 的第一个段落 </p>
		<p>这是第二个 div 的第二个段落 </p>
	</div>

	<input type="text">
	<input type="password" required>
	<input type="text" disabled>
		
	<input type="checkbox">白菜
	<input type="checkbox" checked>萝卜
	<input type="checkbox">青菜
	<input type="checkbox">土豆

	<input type="text">
	<input type="text" required>
	<input type="text" required>

	<br>

	<a href="http:www.baidu.com"> 百度 </a>
	<a href="http:www.google.com"> 谷歌 </a>
	<a href="http:www.hao123.com"> 好123 </a>
	<a href="http:www.sousou.com"> 搜搜 </a>

	<p></p>

	<p lang="en-us">i am chinese boy</p>

	<!-- 锚点 -->
    <a href="#content1">锚点1</a>  
    <a href="#content2">锚点2</a>  
    <a href="#content3">锚点3</a>  
    <a href="#content4">锚点4</a>  
    <hr>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <p id="content1">内容1</p>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <p id="content2">内容2</p>          
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <p id="content3">内容3</p>  
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    <p id="content4">内容4</p>  
    
</body>
</html>